<template>
  <div class="container">
    <div class="content">
      <div class="title">2025年会节目投票统计</div>
      <div class="closs" @click="close">
        <i class="el-icon-close"></i>
      </div>
      <div class="statistic">
        <echarts-bar :data="barData" />
      </div>
    </div>
    <div class="ercode" v-if="qrcode">
      <img :src="qrcode" width="100%" alt="" @click="dialogVisible = true" />
      <p>微信扫码参与投票</p>
    </div>
    <el-dialog
      class="preview-ercode-dialog"
      :title="''"
      :visible.sync="dialogVisible"
      width="30%"
      :modal-append-to-body="false"
    >
      <div style="font-size: 0">
        <img :src="qrcode" width="100%" alt="" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import EchartsBar from "./components/echarts-bar.vue";
import { getCountVoting } from "@/api/program-voting";
import { getQrcode } from "@/api/index";
export default {
  name: "ProgramVotingStatistic",
  components: {
    EchartsBar,
  },
  props: {
    sessionCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      timer: null,
      qrcode: null,
      barData: {
        xData: [],
        sData: [],
      },
      dialogVisible: false,
    };
  },
  created() {
    this.getQrcode();
  },
  destroyed() {
    this.clear();
  },
  methods: {
    init() {
      this.clear();
      this.getCountVoting();
      this.getQrcode();
    },
    getCountVoting() {
      getCountVoting({
        code: this.sessionCode,
      })
        .then((res) => {
          if (res.code === 200) {
            const xData = [],
              sData = [];
            res.data.forEach((item) => {
              xData.push(item.programName);
              sData.push(item.totalCount);
            });
            if (!this.barData.xData || !this.barData.xData.length) {
              this.barData.xData = xData;
            }
            this.barData.sData = sData;
          }
        })
        .finally(() => {
          if (!this.timer) {
            this.timer = setInterval(() => {
              this.getCountVoting();
            }, 1000);
          }
        });
    },
    // 增加测试数据
    setTestData() {
      setInterval(() => {
        const data = this.barData.sData.map((item, index) => {
          return index % 3 === 0 ? item + 1 : item;
        });
        this.barData.sData = data;
      }, 2000);
    },
    getQrcode() {
      if (this.qrcode) return;
      let pas = {
        text: `${location.origin}/program-voting?code=${this.sessionCode}`,
      };
      getQrcode(pas)
        .then((res) => {
          this.qrcode = res.data;
        })
        .catch(() => {});
    },
    clear() {
      this.timer && clearInterval(this.timer);
      this.timer = null;
    },
    close() {
      this.$emit("close");
      this.clear();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.content {
  width: 100%;
  height: 100%;
  // position: absolute;
  // left: 0px;
  // top: 0px;
  background: rgba(0, 0, 0, 0.5);
  .title {
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 60px;
    color: rgb(255, 248, 184);
    letter-spacing: 2px;
    text-shadow: rgb(255, 129, 1) 0px 1px, rgb(255, 129, 1) 0px 2px,
      rgb(255, 129, 1) 0px 3px, rgb(255, 129, 1) 0px 5px,
      rgba(255, 0, 0, 0.65) 0px 10px 10px, rgba(255, 0, 0, 0.65) 0px 0px 10px,
      rgba(255, 0, 0, 0.65) 0px 0px 15px, rgba(255, 0, 0, 0.65) 0px 0px 20px;
  }

  .closs {
    position: absolute;
    right: 10px;
    top: 10px;
    color: rgb(255, 129, 1);
    font-size: 45px;
    font-weight: bold;
    cursor: pointer;
  }

  .statistic {
    width: 85%;
    height: calc(100% - 200px);
    margin: 0 auto;
  }
}
.ercode {
  width: 30%;
  max-width: 250px;
  // height: 350px;
  font-size: 0;
  position: absolute;
  right: 20px;
  top: 80px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  p {
    // line-height: 50px;
    font-weight: 700;
    font-size: 22px;
    text-align: center;
    margin: 0;
    margin-top: -10px;
    padding-bottom: 15px;
  }
}
::v-deep {
  .preview-ercode-dialog .el-dialog__body {
    padding: 0;
  }
}
</style>
